<template>
  <TopHeader @back="back" @share="shareLink" :showMore="false"></TopHeader>
  <div class="mine-creator bg-background">
    <img class="bg" src="/images/fqaBg.png" alt="Creator FQA background" />
    <div class="content">
      <AvatarContainer class="mb-4" official-avatar>
        <template #buttons>
          <button :onclick="`location.href='mailto:${CREATOR_MAIL}'`" class="primary-btn">
            {{ $t('common.contact') }}
          </button>
        </template>
      </AvatarContainer>
      <div class="gap-col-16 mb-4 px-4">
        <div class="font-size-16 font-weight-500 line-height-140 d-flex">
          {{ $t('content.creator.line1') }}
          <div class="text-subtitle-x ms-2">@creators</div>
        </div>
        <div class="text-subtitle-x font-size-14 font-weight-500 line-height-120">
          {{ $t('content.creator.line2') }}
        </div>
        <button
          v-if="!userData.is_kyc"
          class="w-100 primary-gradient font-size-14 font-weight-500 line-height-140"
          @click="$openBecomeCreator()"
        >
          <!-- {{ $t('title.beCreator') }} -->
          {{ $t('title.kycApply') }}
        </button>
      </div>
      <v-divider></v-divider>
      <CreatorPanel />
      <v-divider></v-divider>
      <div class="text-subtitle-x font-size-12 font-weight-500 line-height-120 pa-4">
        {{ $t('content.support.line4') }}
        <a :href="'mailto:' + CREATOR_MAIL" class="text-primary">{{ CREATOR_MAIL }}</a>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import { useRouter } from 'vue-router'
import { storeToRefs } from 'pinia'
import { useAccountStore } from '@/store/account'
import { useBecomeCreatorRouteStore } from '@/store/become-creator-route'
import { usePopupDialogStore } from '@/store/popup-dialog'
import { $t } from '@/i18n'
import AvatarContainer from '@/components/layout/creator/AvatarContainer.vue'
import TopHeader from '@/components/layout/creator/TopHeader.vue'
import CreatorPanel from '@/components/mine/CreatorPanel.vue'
import { useCopyToClipboard } from '@/compositions/utils/copyToClipboard'
import { CREATOR_APPLY_STATUS, CREATOR_MAIL, POPUP_DIALOG_TYPE } from '@/constant'
import API from '@/http'

const router = useRouter()
const emits = defineEmits(['toPage', 'back'])
function back() {
  emits('back')
  router.replace({ name: 'mine', hash: '' })
}
const { copy } = useCopyToClipboard()
function shareLink() {
  const link = `${location.origin}/mine/creator-faq`
  copy(link)
}

const { $popupDialog } = usePopupDialogStore()

const alertDialog = (title, content) => {
  $popupDialog(POPUP_DIALOG_TYPE.ALERT, {
    title,
    content,
    confirmText: $t('common.confirm'),
    confirm: () => {},
    showClose: false,
  }).open()
}

// 註冊 & 登入
const accountStore = useAccountStore()
const { userData } = storeToRefs(accountStore)
console.log('userData', userData.value)

const { afterLoginAction } = accountStore
const $openBecomeCreator = afterLoginAction(openBecomeCreator)

const { activate } = useBecomeCreatorRouteStore()

async function openBecomeCreator() {
  try {
    const status = await API.Creator.status()

    switch (status.audit_status) {
      case CREATOR_APPLY_STATUS.NOT_APPLY:
        if (userData.value.is_bind_email || import.meta.env.DEV) {
          emits('toPage', 'become-creator')
          activate()
        } else {
          $popupDialog(POPUP_DIALOG_TYPE.BECOME_CREATOR_VERIFY_EMAIL, {
            title: $t('content.verifyMailFirst'),
            confirm: () => {
              emits('toPage', `mail-verify`)
            },
            cancel: () => {},
          }).open()
        }
        break
      case CREATOR_APPLY_STATUS.REVIEW:
        alertDialog($t('title.review'), $t('content.beCreatorReviewing'))
        break
      case CREATOR_APPLY_STATUS.REJECT:
        alertDialog($t('title.rejectApply'), $t('content.rejectApply', { reason: status.refuse_reason }))
        break
      default:
        return true
    }
  } catch (e) {
    console.error(e)
  }
}

const isShow = ref(true)
watch(
  () => userData.value.is_creator,
  (isCreator) => {
    if (isCreator) {
      isShow.value = false
    }
  },
  { immediate: true },
)
</script>

<style lang="scss" scoped>
.mine-creator {
  width: 100%;
  min-height: 100%;
  padding-bottom: 10rem;

  .bg {
    background-color: #181925;
    max-width: 100%;
    width: 100%;
    max-height: 40.8vw;
    height: auto !important;
  }

  .content {
    height: calc(100% - 40.8vw + 2.5rem);
    transform: translateY(-2.5rem);
  }

  .primary-gradient {
    padding: 0.6525rem;
    border-radius: 1.25rem;
  }
}

.desktop {
  .mine-support .bg {
    height: calc((var(--desktop-main-width) - 2rem) * 0.5625);
  }
}
</style>
